<template>
    <el-main v-loading="loading">
        <ve-line :data="chartData"></ve-line>
    </el-main>
</template>

<script>
    import VeLine from 'v-charts/lib/line.common.min'
    import {get} from "../utils/api";

    export default {
        components: {VeLine},
        data() {
            return {
                loading: false,
                chartData: {
                    columns: [],
                    rows: []
                }
            }
        },
        mounted() {
            this.getViewCounts();
        },
        methods: {
            getViewCounts() {
                this.loading = true;
                get('/article/viewCount').then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.chartData.columns = Object.keys(res.data[0]);
                        this.chartData.rows = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                }).catch(_ => this.loading = false);
            }
        }
    }
</script>

<style scoped lang="stylus">

</style>
